<template>
  <el-card
    style="width: 100%;border-radius: 15px;"
    shadow="always"
  >
    <div class="tableBox">
      <div class="tableTop">
        任务类型 涛子无敌的存在
        &nbsp;
        <el-select
          style="width:15%"
          v-model="form.mainTaskType"
          @change="selectDtat()"
          placeholder="请选择任务类型"
        >
          <el-option
            label="入库任务"
            :value="1"
          />
          <el-option
            label="出库任务"
            :value="2"
          />
          <el-option
            label="机器人任务"
            :value="3"
          />
          <el-option
            label="单步任务"
            :value="4"
          />
          <el-option
            label="异常任务"
            :value="6"
          />
        </el-select>
        &nbsp;
        任务状态
        &nbsp;
        <el-select
          style="width:15%"
          v-model="form.mainFinishStatus"
          @change="selectDtat()"
          placeholder="请选择任务状态"
        >
          <el-option
            label="全部"
            :value="-1"
          />
          <el-option
            label="异常步骤"
            :value="-2"
          />
          <el-option
            label="异常周转区"
            :value="1"
          />
          <el-option
            label="中间辊存放区"
            :value="2"
          />
          <el-option
            label="工作辊存放区"
            :value="3"
          />
          <el-option
            label="待磨区"
            :value="4"
          />
          <el-option
            label="中间辊缓存区"
            :value="5"
          />
        </el-select>
        &nbsp;
        <el-button
          type="primary"
          size="mini"
          class="button"
          color="#36f"
          @click="selectDtat();"
        >查询</el-button>
      </div>
      <el-table
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
        style="margin-top: 10px;width: 100% "
        :data="tableData"
        class="table"
      >
        <!-- <el-table-column prop="mainOrder" label="序号"></el-table-column> -->
        <el-table-column
          prop="mainTaskNo"
          label="主任务流水号"
        ></el-table-column>
        <el-table-column
          prop="mainTaskType"
          label="任务类型"
          width="110"
        >
          <template #default="scope">
            <span v-if="scope.row.mainTaskType == 1">入库任务</span>
            <span v-if="scope.row.mainTaskType == 2">出库任务</span>
            <!-- <span v-if="scope.row.mainTaskType == 3">机器人任务</span> -->
            <span v-if="scope.row.mainTaskType == 4">单步任务</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="mainBoxName"
          label="辊框号"
        ></el-table-column>
        <el-table-column
          prop="statusAdjustment.statusChinese"
          width="110"
          label="执行状态"
        >

        </el-table-column>
        <el-table-column
          prop="mainCreateTime"
          label="创建时间"
        ></el-table-column>

        <el-table-column
          label="优先级"
          width="100"
        >
          <template #default="scope">
            <el-switch
              @change="updlevel($event, scope.row)"
              :active-value="10"
              :inactive-value="5"
              v-model="scope.row.processLevel"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template
            #default="scope"
            width="250"
          >
            <el-button
              type="danger"
              @click="upd(scope.row)"
            >终止</el-button>
            <el-button
              type="primary"
              @click="RowSelect(scope.row)"
            >子任务</el-button>
          </template>
        </el-table-column>

        <template v-slot:empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
      <el-pagination
        style="margin-bottom: 20px;"
        page-size="50"
        @current-change="handlePageChange"
        background
        layout="prev, pager, next"
        :total="total"
      />
      <!-- <el-dialog v-model="dialogVisible" title="辊框详情" width="80%" draggable>
                <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="tableItem" border>
                    <el-table-column prop="productCardSlot" label="辊槽号"></el-table-column>
                    <el-table-column prop="productName" label="轧辊号"></el-table-column>
                    <el-table-column label="轧辊状态">
                        <template #default="scope">
                            <span v-if="scope.row.productStatus == 1">黑辊</span>
                            <span v-if="scope.row.productStatus == 2">白辊</span>
                            <span v-if="scope.row.productStatus == 3">异常辊</span>
                            <span v-if="scope.row.productStatus == 4">事故辊</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productDiameter" label="轧辊直径(mm)"></el-table-column>
                    <el-table-column label="轧辊类型">
                        <template #default="scope">
                            <span v-if="scope.row.rollType == 1">一中间辊</span>
                            <span v-if="scope.row.rollType == 2">工作辊</span>
                            <span v-if="scope.row.rollType == 3">二中间辊</span>
                            <span v-if="scope.row.rollType == 4">支撑辊</span>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
            </el-dialog> -->
      <el-dialog
        v-model="dialogVisibleTask"
        title="子任务列表"
        width="80%"
        draggable
      >
        <el-table
          style="width: 100% "
          :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }"
          :data="tableDataCz"
          border
        >
          <el-table-column
            prop="processRegionStart"
            label="起点区域"
          ></el-table-column>
          <el-table-column
            prop="processStartPoint"
            label="起点位置"
          ></el-table-column>
          <el-table-column
            prop="processRegionEnd"
            label="终点区域"
          ></el-table-column>
          <el-table-column
            prop="processEndPoint"
            label="终点位置"
          ></el-table-column>
          <el-table-column
            prop="processLevel"
            label="优先级"
          ></el-table-column>
          <el-table-column
            prop="processCreateTime"
            width="200"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            prop="processFinishTime"
            width="200"
            label="完成时间"
          ></el-table-column>
          <el-table-column label="执行状态">
            <template #default="scope">
              <span v-if="scope.row.processStatus == 1">等待接收任务</span>
              <span v-if="scope.row.processStatus == 2">任务已发送</span>
              <span v-if="scope.row.processStatus == 3">任务已完成</span>
              <span v-if="scope.row.processStatus == 4">重发机制</span>
              <span v-if="scope.row.processStatus == 5">任务异常</span>
              <span v-if="scope.row.processStatus == 6">取料完成</span>
              <span v-if="scope.row.processStatus == 7">货物运输中</span>
              <span v-if="scope.row.processStatus == 8">等待设备接收</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="processStepStatus"
            label="步骤"
          ></el-table-column>
          <el-table-column
            prop="productBoxRollNo"
            width="200"
            label="产品流水号"
          ></el-table-column>
          <template v-slot:empty>
            <el-empty description="暂无数据" />
          </template>
        </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisibleTask = false">关闭</el-button>

          </div>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  selectTableMaintaskInfoList,
  updateMaintaskErrorInformation,
  updateMaintaskInformation
} from "@/api";
import { Alex } from "@/types";
import { ElMessage, ElMessageBox } from "element-plus";
const taskType = ref("1");
const page = ref(1);
const count = ref(0);
const tableData = ref([]);
const tableDataCz = ref([]);
const dialogVisibleTask = ref(false);
const RowSelect = (e: any) => {
  dialogVisibleTask.value = true;
  tableDataCz.value = e.getTableSteporderList;
};
const alex = new Alex();

const form = ref({
  mainTaskType: 1,
  mainFinishStatus: -1,
  page: 1,
  size: 10
});
onMounted(() => {
  selectDtat();
});
const total = ref(0);
const selectDtat = () => {
  alex.parameter = form.value;
  selectTableMaintaskInfoList(alex).then((res: any) => {
    tableData.value = res.result.list.list;
    total.value = res.result.list.total;
  });
};
const updlevel = (val: any, row: any) => {
  console.log(val, row);

  let alex = new Alex();
  alex.parameter = {
    mainInfo: JSON.parse(JSON.stringify(row))
  };
  delete alex.parameter.mainInfo.statusAdjustment;
  delete alex.parameter.mainInfo.getTableSteporderList;
  alex.parameter.mainInfo.processLevel = parseInt(val);
  updateMaintaskInformation(alex).then((res: any) => {
    ElMessage({
      message: "操作成功！",
      type: "success"
    });
    selectDtat();
  });
};
const handlePageChange = (val: any) => {
  form.value.page = val;

  selectDtat();
};
const upd = (row: any) => {
  let alex = new Alex();
  alex.parameter = {
    mainInfo: row
  };
  delete alex.parameter.mainInfo.statusAdjustment;
  delete alex.parameter.mainInfo.getTableSteporderList;

  ElMessageBox.confirm("确认终止该任务?", "", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    updateMaintaskErrorInformation(alex).then((res: any) => {
      ElMessage({
        message: "操作成功！",
        type: "success"
      });
      selectDtat();
    });
  });
};
</script>
<style scoped>
.table {
  height: 70vh;
  margin: 0px auto 20px auto;
  width: 98%;
}

span {
  cursor: pointer;
}

/* :deep(.el-input__wrapper) {
    background-color: #252547;
    border-color: #13132b;
    color: #fff;
    box-shadow: none;
}
*/
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background: #36f;
}

:deep(.el-card__body) {
  padding: 0;
}

.tableBox {
  box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px #0000001a,
    0 1px 2px -1px #0000001a;
  border: 1px solid #e9e9eb;
  background-color: #ffffff;
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tableTop {
  width: 100%;
  margin-bottom: 20px;
  padding: 1.2rem;
  height: 32px;
  color: #323639;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 2px solid #e9e9eb;
}

.box {
  /* width: 1600px; */
  display: flex;
  height: 80vh;
  margin: 0 auto;
}

/* 
:deep(.el-table) {
    font-size: 12px;
    --el-table-border-color: #2e6099;
    border-radius: 4px;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #2e6099;
}

:deep(.el-table--fit) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell) {
    color: black;
    color: white;
    backdrop-filter: blur(1px);
    font-weight: bold;
}

:deep(.el-table th.el-table__cell) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell:hover) {
    color: black;
}

:deep(.el-table tr) {
    background-color: #ffffff00;
    color: white;
}

:deep(.el-table tr:hover) {
    background-color: #222b45;
}

:deep(.el-table td:hover) {
    background-color: #222b45;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: #323e61 !important;
} */
</style>